<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
  <meta name="keywords" content="addInteractiveControlToMap,addMarkersWithInteractivity" />
  <title>HERE Maps API Example: Interacting with markers</title>
  <!-- Set up constants such as APP ID and token -->
  <script type="text/javascript" src="../libs/hereAppIdAndToken.js"></script>
  <!-- Bootstrap jQuery Library -->
  <script type="text/javascript" src="../libs/jQl.min.js"></script>
  <!-- Asynchronously the HERE Maps API for JavaScript -->
  <script type="text/javascript" src="../libs/hereAsyncLoader.js"
    id="HereMapsLoaderScript"
    data-map-container="mapContainer"
    data-params="maps"
    data-callback="afterHereMapLoad"
    data-libs="tooltip,interactive-control"
    data-parent="demos/marker-interactivity-component/">
  </script>

  <link rel="icon" href="http://here.com/favicon.ico"/>
  <!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
</head>
<body>
  <h1>Interacting with markers</h1>
  <p>
    This example adds a custom map component, which adds interactivity to the map markers.
    Tooltips have also been added to all of the markers on the map below, to explain what
    they do. The green and blue the markers on the map are <strong>interactive</strong> -
    as you hover over them the cursor will change to offer the user visual feedback to showing
    that clicking on the marker will cause something to happen.
  </p>
  <ul>
    <li>The Blue marker works like a link, clicking on it forwards you to a new page</li>
    <li>The Green marker executes a line of JavaScript when it is clicked.</li>
    <li>The Red marker is just a marker, it does nothing special, note that cursor does not
       change as you hover over it.</li>
   </ul>
  <div id="mapContainer" style="width:540px; height:334px;"></div>
  <div id="src">
    <br/>
      <p>The control can be loaded using the following <code>&lt;script&gt;</code> element:
      <pre><code class='prettyprint'>&lt;script type="text/javascript" charset="UTF-8" src="<a href="libs/interactive-control.js">libs/interactive-control.js</a>"&gt;&lt;/script></code></pre>
    <p>Code:</p>
  </div>
<script id="example-code" data-categories="marker,library" type="text/javascript" >
//<![CDATA[

function addTooltipControlToMap(map) {
  map.components.add(new Tooltip());
}

function addInteractiveControlToMap(map) {
  map.components.add(new Interactive());
}

function addMarkersWithInteractivity(map) {
  var brandenburgerTorMarker = new nokia.maps.map.StandardMarker(
    new nokia.maps.geo.Coordinate(52.516237, 13.377686),
    {
      title : 'This is a link',
      $href : 'http://en.wikipedia.org/wiki/Brandenburg_Gate',
      brush: {color: '#0000FF'}
    }
  ),
    // The GREEN marker has a $click attribute and works like a firing an onclick event.
    fernsehturmMarker = new nokia.maps.map.StandardMarker(
      new nokia.maps.geo.Coordinate(52.520816, 13.409417),
      {
        title : 'This has a click event',
        $click : 'alert(\'Fernsehturm\');',
        brush: {color: '#00AA00'}
      }
    ),
    // The RED marker is used as a control and is just a marker.
    thirdMarker = new nokia.maps.map.StandardMarker(
      new nokia.maps.geo.Coordinate(52.530816, 13.385),
      {
        title : 'Just a marker',
        brush: {color: '#FF0000'}
      }
    );

  // Add the markers onto the map
  map.objects.addAll([brandenburgerTorMarker, fernsehturmMarker, thirdMarker]);
}

function afterHereMapLoad(map) {
  map.set('center', new nokia.maps.geo.Coordinate(52.52, 13.37));
  map.set('zoomLevel', 12);
  map.set('baseMapType', map.SATELLITE);

  addInteractiveControlToMap(map);
  addTooltipControlToMap(map);
  addMarkersWithInteractivity(map);
}
//]]>
</script>
<script type="text/javascript" src="../libs/prettyprint.js"></script>
</body>
</html>
